<template>
	<view class="con">
		<view class="info" v-for="(item,index) in interfaces" :key="index" v-if="item.isManager == false && item.speed > 0" >
			<view class="title" >
				网卡：{{item.name}} | 速率：{{item.speed}} | ip: {{item.ip}}
			</view>
			<view class="switch">
				<view class="">
					共{{numbers[index].length}}条线路
				</view>
				<view class="switch1">
					<view class="">
						bras开关：
					</view>
					<switch color="#00a9e1"  style="transform:scale(0.7)"></switch>
				</view>
			</view>
			
			 <view class="line" v-if="numbers[index].length > 0">
				<view class="vlan">
					vlan_id
				</view>
				<view class="numinfo">
					拨号信息
				</view>
				<view class="close" @tap="delAll(index)">
					X
				</view>
			</view>
			
			<view class="line-info" v-for="(item1,index1) in numbers[index]" :key="index1" >
			<!-- <view class="line-info"> -->
				<view class="vlan-info">
					{{item1.vlanId}}
				</view>
				<view class="numinfo-info">
					<!-- <view class="">
						网卡：{{item1.name}}
					</view> -->
					<view class="">
						账号：{{item1.account}}
					</view>  
					<view class="">
						密码：{{item1.password}}
					</view>  
					<view class="">
						MAC：{{item1.mac}}
					</view>  
				</view>
				<view class="close-info" @tap="update(index,index1)">
					<image src="../../static/update.png" style="width: 50rpx;height: 50rpx;" ></image>
				</view>
				<view class="close-info" @tap="del(index,index1)">
					<image src="../../static/del.png" style="width: 50rpx;height: 50rpx;"></image>
				</view>
			</view>
			
			
			<view class="fill">
				<view class="fill-button" @tap="addLines(index,item.name)">
					批量填写
				</view>
				<view class="fill-button" @tap="addLine(index,item.name)">
					添加线路
				</view>
			</view>
		</view>
		
		<view class="foot">
			<view class="buttons">
				<view class="button-pass" @tap="tonatinfo">
					同步网卡信息
				</view>
				<view class="button-yes" @tap="callNumber">
					开始拨号
				</view>
			</view>
		</view>
		
		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				<view class="">
					编辑线路信息
				</view>
				<view class="" @tap="coneal">
					X
				</view>
			</view>
			<view class="line"></view>
			<view class="content">
				<view class="node-type-one">
					<view class="title">网卡</view>
					<input type="text" class="uni-input" name="" v-model="natname" placeholder="网卡" />
				</view>
				<view class="node-type-one">
					<view class="title">vlan_id</view>
					<input type="text" class="uni-input" name="" v-model="vlan_id" placeholder="vlan_id" />
				</view>
				<view class="node-type-one">
					<view class="title">账号</view>
					<input type="text" class="uni-input" name="" v-model="name" placeholder="请填写拨号账号" />
				</view>
				<view class="node-type-one">
					<view class="title">密码</view>
					<input type="text" class="uni-input" name="" v-model="password" placeholder="填写密码" />
				</view>
				<view class="node-type-one">
					<view class="title">MAC</view>
					<input type="text" class="uni-input" name="" v-model="mac" placeholder="填写MAC地址" />
				</view>
				<view class="node-type-one">
					<view class="title"></view>
					<view class="tip">
						如果非运营商强制要求指定MAC地址，请勿随意调整。调整可能会引发短暂掉线
					</view>
				</view>
			</view>
			<view class="button" @tap="save">
				保存
			</view>
		</view>
		
		<view class="box" v-if="shows"  @tap="coneals"></view>
		
		<view class="modals" v-if="shows">
			<view class="title">
				<view class="">
					批量填写该网卡关联的vlan_id、拨号账号、拨号密码
				</view>
				<view class="" @tap="coneals">
					X
				</view>
			</view>
			<textarea class="content" v-model='textarea' maxlength="9999"></textarea>
			<view class="tip">
				如果非运营商强制要求指定MAC地址，请勿随意调整。调整可能会引发短暂掉线
			</view>
			<view class="buttons">
				<view class="btn-info">
					批量识别将覆盖网卡所有拨号信息
				</view>
				<view class="btn">
					<view class="btn-clear" @tap="delTextareaAll">
						清空
					</view>
					<view class="btn-check" @click="saveAll">
						识别
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				natnums:2,
				shows:false,
				show:false,
				vlan_id:'',
				name:'',
				password:'',
				mac:"",
				textarea:"",
				numbers:[],
				nodeID:'',
				rSelect:'',
				interfaces:[],
				manager:[],
				traffic:[],
				index:'',
				index1:'',
				managerNetDevName:"",
				natname:'',
				netcardlist:[]
			}
		},
		
		onLoad(option) {
			console.log(option)
			this.nodeID = option.nodeID
			this.rSelect = option.rSelect
			this.natInfo()
		},
		methods: {
			
			natInfo(){
				uni.showLoading({
					title:'加载中'
				})
				
				this.$api.interfaceApi('bgipushinfo')({
					//sys:App.globalData.sys,
					nodeId:this.nodeID
				}).then(result=>{
					uni.hideLoading();
					if(result.code == 200){
						this.interfaces = result.value
						this.netcardlist = result.value.dialingInfo
						//console.log(result.value.dialingInfo)
						//console.log("长度"+this.interfaces.length)
						for(let	i=0;i<this.interfaces.length;i++){
							console.log(this.interfaces[i].dialingInfo)
							console.log(this.interfaces[i].dialingInfo.length)
							this.numbers[i]= []

							for(let	j=0;j<this.interfaces[i].dialingInfo.length;j++){
								this.numbers[i].push({
									'name' : this.interfaces[i].name,
									'vlanId' : this.interfaces[i].dialingInfo[j].vlanId,
									'account' :this.interfaces[i].dialingInfo[j].account,
									'password' : this.interfaces[i].dialingInfo[j].password,
									'mac' :this.interfaces[i].dialingInfo[j].mac,
									'ip' :this.interfaces[i].dialingInfo[j].ip
								})
							} 
						}
						console.log(this.numbers)
					}else{
						uni.showToast({
							title:"获取失败",
							icon:'none'
						})
					}
				})
				
			},
			
			//同步网卡信息
			tonatinfo(){
				this.natInfo()
			},
			
			addLine(index,natsname){
				this.show = true
				this.index= index
				this.natname = natsname
			},
			
			coneal(){
				this.show = false
				this.vlan_id = ''
				this.name = ''
				this.password = ''
				this.mac = ''
				this.index = ''
				this.index1 = ''
			},
			//添加单条
			save(){
				if(this.index1 === ''){
					//添加线路
					if(this.name===''||this.password ===''){
						uni.showToast({
							title:'信息暂未完整',
							icon:'error',
						})
					}else{
						this.numbers[this.index].push({
							'name' : this.natname,
							'vlanId' : this.vlan_id,
							'account' :this.name,
							'password' : this.password,
							'mac' :this.mac
						})
					}
				}else{
					// 编辑图标保存不能为空
					if(this.name===''||this.password ===''){
						uni.showToast({
							title:'信息暂未完整',
							icon:'error',
						})
					}else{
						this.numbers[this.index][this.index1].name = this.natname
						this.numbers[this.index][this.index1].vlanId = this.vlan_id
						this.numbers[this.index][this.index1].account = this.name
						this.numbers[this.index][this.index1].password = this.password
						this.numbers[this.index][this.index1].mac = this.mac
					}
				}
				
				this.show=false
				this.vlan_id = ''
				this.name = ''
				this.password = ''
				this.mac = ''
				this.index = ''
				this.index1 = ''
			},
			
			
			addLines(index,natsname){
				this.natname = natsname
				let data = '';
				if(this.numbers.length > index){
					for(let i=0;i<this.numbers[index].length;i++){
						data += this.numbers[index][i].vlanId+" "+this.numbers[index][i].account+" "+this.numbers[index][i].password
						if(i < this.numbers[index].length-1){
							data+="\n"
						}
					}
				}
				
				this.index = index
				this.textarea = data
				this.shows = true
			},
		
			
			//识别
			saveAll(){
				
				let data = this.textarea.split('\n')

				this.numbers[this.index] = [];

				for(let i=0;i<data.length;i++){
					var temp = data[i].split(' ')
					this.numbers[this.index].push({
						'name':this.natname,
						'vlanId':temp[0],
						'account':temp[1],
						'password':temp[2],
						'ip':temp[3]
					}) 
	
				}
				this.shows = false
			},
			
			delTextareaAll(){
				this.textarea = ''
			},
			
			coneals(){
				this.shows = false
				this.index = ''
				this.index1 = ''
			},
			
			//删除所有
			delAll(index){
				let _this = this
				uni.showModal({
					title:'清空网卡拨号信息',
					content:'确定要清空网卡拨号信息吗？清空后无法撤销！',
					success:res=>{
						if(res.confirm){
							//this.numbers[index] = []
							_this.$set(this.numbers,index,[])
						}else if(res.cancel){
							
						}
					}
				})
			},
			
			//删除单条
			del(index,index1){
				let _this = this
				uni.showModal({
					title:'温馨提示',
					content:'确定要删除本条拨号信息吗？清空后无法撤销！',
					success:res=>{
						if(res.confirm){
							//this.numbers[index].splice(index1,1)
							_this.$delete(this.numbers[index],index1)
							_this.$forceUpdate()
						}else if(res.cancel){
							
						}
					}
				})

			},
			update(index,index1){

				this.show = true
				this.natname = this.numbers[index][index1].name
				this.vlan_id = this.numbers[index][index1].vlanId
				this.name = this.numbers[index][index1].account
				this.password = this.numbers[index][index1].password
				// this.mac = this.numbers[index][index1].ip
				this.ip = this.numbers[index][index1].ip
				this.mac = this.numbers[index][index1].mac
				this.index = index
				this.index1 = index1
			},
			
			callNumber(){
				
				let _this = this
				let adddata = [];
				let newData = []
				console.log(this.numbers)
				for(let i=0;i<this.numbers.length;i++){
					
					if(this.numbers[i].length <=0 ){
						continue
					}
					for(let j=0;j<this.numbers[i].length;j++){
						let temp = {
							'name':this.numbers[i][j].name,
							'vlanId':this.numbers[i][j].vlanId,
							'account':this.numbers[i][j].account,
							'password':this.numbers[i][j].password,
						}
						//console.log(temp)
						newData.push(temp)
						console.log(newData)
						
					}
				}
				

				adddata = {
					'dialingInfos':newData
				}
				
				uni.showModal({
					
					title:'开始拨号',
					content:'请仔细核对拨号信息，确认开始拨号吗？',
					success:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'拨号中'
							})
							_this.$api.interfaceApi('bgicallinfos')({
								//sys:App.globalData.sys,
								nodeId:_this.nodeID,
								data: JSON.stringify(adddata)
							}).then(result=>{
								console.log(_this.nodeID)
								uni.hideLoading();
								uni.navigateTo({
									// url:'pages/equipment/pai-nat-info?nodeID='+_this.nodeID
									url:'/pages/equipment/pai-nat-info?selectID='+_this.nodeID
								})
								// if(result.code == 200){
								// 	console.log("成功进入")
								// 	uni.navigateTo({
								// 		url:'/pages/index/numbers-line?nodeID='+_this.nodeID
								// 	})
								// }else{
								// 	uni.showToast({
								// 		title:result.desc,
								// 		icon:'none'
								// 	})
								// }
							})	
						}else if(res.cancel){
							
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.con{
		padding: 10rpx 40rpx 300rpx 40rpx;
		box-sizing: border-box;
		.info{
			background-color: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #eaeaea;
			border-radius: 20rpx;
			margin-bottom: 50rpx;
			
			.title{
				font-size: 26rpx;
				padding: 20rpx 20rpx 0rpx 20rpx;
				box-sizing: border-box;
			}
			
			.switch{
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				line-height: 55rpx;
				
				.switch1{
					display: flex;
					justify-content: space-between;
				}
			}
			
			.line{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: bolder;
				background-color: #75cae645;
				.vlan{
					width: 20%;
				}
				.numinfo{
					width: 60%;
				}
				.close{
					width: 20%;
					text-align: end;
				}
			}
			
			.line-info:nth-of-type(even){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
	
				.vlan-info{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-info{
					width: 60%;
					display: flex;
					flex-direction: column;
				}
				.close-info{
					width: 10%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
			
			.line-info:nth-of-type(odd){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				background-color: #75cae645;
				.vlan-info{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-info{
					width: 60%;
					display: flex;
					flex-direction: column;
				}
				.close-info{
					width: 10%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
			
			.fill{
				display: flex;
				flex-direction: row-reverse;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				
				.fill-button{
					background-color: #00a9e1;
					color: #FFFFFF;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
		}
		
		.foot{
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2rpx solid #eaeaea;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #d4cdcd;
			height: 240rpx;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.buttons{
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				
				.button-pass{
					padding: 20rpx 90rpx;
					border-radius: 20rpx;
					border: 2rpx solid #eaeaea;
					font-size: 30rpx;
				}
				
				.button-yes{
					padding: 20rpx 90rpx;
					border: 2rpx solid #FFFFFF;
					color: #FFFFFF;
					border-radius: 20rpx;
					font-size: 30rpx;
					background: linear-gradient(to right , #00a9e1 , #0055ff);
				}
			}	
		}
		
		.modal{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 100%;
			height: 940rpx;
			position: fixed;
			bottom: 0%;
			left: 0%;
			z-index: 100;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			
			.line{
				border: 1rpx solid #d6d3d3;
			}
			
			.content{
				.node-type-one{
					display: flex;
					padding: 30rpx 0 0 0;
					
					.title{
						width: 20%;
						padding: 20rpx 10rpx;
						font-size: 26rpx;
					}
				
					.uni-input{
						width: 80%;
						background-color:#eaeaea ;
						padding: 20rpx 10rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
					}
					
					.radio{
						padding: 20rpx 10rpx;
						font-size: 26rpx;
					}
					
					.tip{
						width: 80%;
						font-size: 26rpx;
						color: #d4cdcd;
					}
					
				}
			}
			.button{
				background-color: #00a9e1;
				color: #FFFFFF;
				text-align: center;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 30rpx;
			}
			
		}
		.box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 99;
		}
		
		.modals{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 100%;
			height: 600rpx;
			position: fixed;
			top: 20%;
			left: 0%;
			z-index: 100;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				font-size: 24rpx;
				box-sizing: border-box;
			}

			.content{
				width: 100%;
				margin-top: 20rpx;
				border: 1rpx solid #d6d3d3;
			}
			.tip{
				font-size: 26rpx;
				color: #cec8c8;
				margin-top: 20rpx;
			}
			.buttons{
				display: flex;
				justify-content: space-between;
				.btn-info{
					width: 70%;
					color: #ff5500;
					font-size: 26rpx;
				}
				
				.btn{
					display: flex;
					width: 30%;
					justify-content: space-between;
					.btn-clear{
						border: 1rpx solid #cfcfcf;
						border-radius: 20rpx;
						padding: 10rpx;
					}
					.btn-check{
						border: 1rpx solid #00a9e1;
						border-radius: 20rpx;
						padding: 10rpx;
						background-color: #00a9e1;
						color: #FFFFFF;
					}

				}
			}
		}
		
	}
</style>
